<section class="cf" id="beautiful">

	<div class="page one hasHeader">

		<div class="onecol">

			<h1>Building Great Web Applications</h1>
			<h2 class="main-caption">Building Beautiful Applications</h2>
			<p>The aesthetics of your application will directly affect how easily people are able to accomplish their goals with your application. A web application provides rich visual experiences that will delight the eye without distracting the mind; it puts a premium on aesthetics and uses similar design paradigms as native applications without sacrificing usability.</p>
			<p>Visually appealing images, color, and fonts are balanced against the needs for speed, scannable text, and ease of use. Audience and cultural context also matter as colors, layout or word choices may have different cultural meanings. Your application's visual design should please your users and improve usability for them.</p>
			<p class="callout lefty w33">A web application's visual design should please users and enhance usability</p>
			<h3>Leverage the open web features to provide beautiful designs</h3>
			<p>People expect to see web applications that are on par with the visual design of client or mobile applications instead of the sometimes uninspiring web content they’re used to.</p>

		</div><!-- end col -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <div class="image_block centery w80">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_beautiful.jpg" alt="Figure 4.1 - Beauty is in the eye (and hand) of the app holder!" title="Figure 4.1 - Beauty is in the eye (and hand) of the app holder!">
            	<p class="caption">Figure 4.1 - Beauty is in the eye (and hand) of the app holder!</p>
            </div>

		</div><!-- end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="beautiful-tips">

	<div class="page one">

		<div class="onecol">

			<h3 class="help_h3">Developers can create rich immersive experiences by using:</h3>

			<ol class="book-ol top_line">
				<li><span class="big-bullets">1.</span><strong>Real time drawing surfaces</strong> that are interactive and relevant to users.</li>
				<li><span class="big-bullets">2.</span><strong>Fonts and other typographic features</strong> that enhance the readability of content.</li>
				<li><span class="big-bullets">3.</span><strong>Textures, gradients, and shapes that increase the visual appeal</strong> of your application without distracting from the content.</li>
				<li><span class="big-bullets">4.</span><strong>Graphics and images with animations</strong> to help users understand what is going on and inform them that the application is working.</li>
				<li><span class="big-bullets">5.</span><strong>High quality and high resolution images</strong> that will look good no matter how users size their browser window.</li>
				<li><span class="big-bullets">6.</span><strong>Real world graphics, illustrations and icons</strong> to provide a level of familiarity and realism. If people understand how to use those materials in the real world, they should be easily able to translate those experiences to the web application.</li>
			</ol>

		</div><!-- end col -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

			<h3 class="help_h3">Resources To Help You</h3>
			<h4 class="help_h4">Articles</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://www.alistapart.com/articles/more-meaningful-typography/" title="More Meaningful Typography" target="_blank">More Meaningful Typography</a> - from A List Apart by Tim Brown</li>
				<li><a class="no-ajaxy" href="http://www.alistapart.com/articles/on-web-typography/" title="On Web Typography" target="_blank">On Web Typography</a> - from A List Apart by Jason Santa Maria</li>
				<li><a class="no-ajaxy" href="http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction/Introduction.html" title="Safari CSS Visual Effect Guide" target="_blank">Safari CSS Visual Effects Guide</a></li>
			</ul>
			<h4 class="help_h4">Tutorials</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/webfonts/quick/" title="Quick Guide to Implement Webfonts via @font-face" target="_blank">Quick Guide to Implement Webfonts via @font-face</a></li>
				<li><a class="no-ajaxy" href="http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/" title="An Introduction To CSS3 Keyframe Animations" target="_blank">An Introduction To CSS3 Keyframe Animations</a></li>
			</ul>
			<h4 class="help_h4">Libraries &amp; Frameworks</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://www.google.com/webfonts" title="Google Web Fonts API" target="_blank">Google Web Fonts API</a> - Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers. We believe that there should not be any barriers to making great websites.</li>
				<li><a class="no-ajaxy" href="https://typekit.com/" title="TypeKit" target="_blank">TypeKit</a> - Simple, bulletproof, standards compliant, accessible, and totally legal fonts for the web.</li>
				<li><a class="no-ajaxy" href="http://gradients.glrzad.com/" title="CSS3 Gradient Generator" target="_blank">CSS3 Gradient Generator</a> - The CSS3 Gradient Generator is a showcase for the power of CSS gradients.</li>
				<li><a class="no-ajaxy" href="http://www.colorzilla.com/gradient-editor/" title="Ultimate CSS Gradient Generator" target="_blank">Ultimate CSS Gradient Generator</a> - a powerful Photoshop-like CSS gradient editor from ColorZilla.</li>
			</ul>
			<h4 class="help_h4">Examples</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://leaverou.me/css3patterns/" title="CSS3 Patterns Gallery" target="_blank">CSS3 Patterns Gallery</a></li>
			</ul>

		</div><!-- end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="whole-screen">

	<div class="page one">

		<div class="onecol">

			<h3>Use the whole screen</h3>
			<p>One big distinction between web pages and web applications is the way that they use the screen real estate available to them. Like client applications, great web applications use all of the space available to them.</p>

			<p>When creating a great visual design, designers should:</p>
			<ol class="book-ol">
				<li><span class="big-bullets">1.</span><strong>Build your app to look like an application,</strong>, instead of a website with margins on the left and right.</li>
				<li><span class="big-bullets">2.</span><strong>Create a visual design that uses all of the space available to it</strong>. Because you can’t count on a specific size, size the content based on screensize, support window resizing and apply scrolling when needed.</li>
				<li><span class="big-bullets">3.</span><strong>Avoid fixed width layouts</strong> that have margins on the left or right side of the application which may remind users too much of web pages.</li>
				<li><span class="big-bullets">4.</span><strong>Use the Full Screen API</strong> that is available in many modern browsers to provide a full screen interface when appropriate.</li>
			</ol>

			<h3 class="help_h3">Web apps that use the whole screen include:</h3>
			<ul class="ext_ul" id="ext1">
		  		<a href="#" target="_blank" class="previewWindow">
       			<div class="arrow"></div>
       			<div class="screenshot"><img src=""/></div>
       			<div class="caption"></div>
       	 		</a>
				<li><a class="preview no-ajaxy" data-url="screenshot_gojee.jpg" href="http://gojee.com/" title="Gojee" target="_blank">Gojee</a></li>
				<li><a class="preview no-ajaxy" data-url="screenshot_nyt.jpg" href="http://www.nytimes.com/chrome/" title="New York Times Web App" target="_blank">New York Times Web App</a></li>
				<li><a class="preview no-ajaxy" data-url="screenshot_word2.jpg" href="http://wordsquared.com/" title="Word Squared" target="_blank">Word<sup>2</sup></a></li>
				<li><a class="preview no-ajaxy" data-url="screenshot_github.jpg" href="http://githubissues.heroku.com/" title="GitHub Issues" target="_blank">GitHub Issues</a></li>
				<li class="li_last"><a class="preview no-ajaxy" data-url="screenshot_60min.jpg" href="https://chrome.google.com/webstore/detail/imjhdahelgojehmfmkmdfjcpfbglbfmj" title="60 Minutes" target="_blank">60 Minutes</a></li>
			</ul>

		</div><!-- end col -->

		<div class="t_fix" id="ext1_div"></div><!-- External Links Reference -->

    </div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <div class="image_block centery w90">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_navigation.jpg" alt="Figure 4.2 - Steer your users any way you choose!" title="Figure 4.2 - Steer your users any way you choose!">
           		<p class="caption mb175">Figure 4.2 - Steer your users any way you choose!</p>
            </div>

			<h3>Web applications don’t use traditional navigational elements</h3>
			<p>Web applications work without having to depend on browser navigation elements like the back button or forward buttons, reload, etcetera. They also work without the traditional in-page navigational elements like links down the left side or along the top.</p>

			<p>While web applications don’t use these traditional navigational elements, they may use the address bar to save or share state and the back or forward buttons enable to user to go back and forward through that state. Instead of using links to move the user between different pages, buttons are used to change the state of the existing content.</p>

		</div><!-- end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="make-it-easy">

	<div class="page one">

		<div class="onecol">

			<h3>Make it easy to try &amp; use</h3>
			<p>People are quickly turned off by complex or lengthy sign-up processes. If your application requires people to log in, it should be an easy process that requests only the minimal information to get started. If possible, make it easier for people to sign up by leveraging an existing OpenID provider. Users will appreciate having fewer accounts and passwords.</p>

			<p>To help decrease the bounce rate, and make the sign up and sign in process easy:</p>
			<ol class="book-ol">
			<li><span class="big-bullets">1.</span><strong>Provide an experience for people who choose to not log in</strong> or create an account.</li>
				<li><span class="big-bullets">2.</span><strong>Reward users who choose to create an account and sign in</strong> with additional features and more integrated services.</li>
				<li><span class="big-bullets">3.</span><strong>Provide support for signing in via an OpenID provider</strong> such as a Google account, thereby reducing the number of usernames and passwords people need to remember.</li>
				<li><span class="big-bullets">4.</span><strong>If you already have a login system consider correlating the OpenID provider</strong> to the user account in your system.</li>
			</ol>

			<h3 class="help_h3">Web apps that do this well today include:</h3>
			<ul class="ext_ul" id="ext2">
		  		<a href="#" target="_blank" class="previewWindow">
       			<div class="arrow"></div>
       			<div class="screenshot"><img src=""/></div>
       			<div class="caption"></div>
       	 		</a>
				<li><a class="preview no-ajaxy" data-url="screenshot_etherpad.jpg" href="http://ietherpad.com/" title="EtherPad" target="_blank">EtherPad</a> - EtherPad allows users to start using the app immediately, and requires users to sign in only when they want to save.</li>
				<li class="li_last"><a class="preview no-ajaxy" data-url="screenshot_picnik.jpg" href="http://picnik.com/app" title="Picnik" target="_blank">Picnik</a> - Keeps the barrier to entry low and allows users to edit and save their photos without ever having to log in or create an account.</li>
			</ul>

		</div><!-- end col -->

        <div class="t_fix" id="ext2_div"></div><!-- External Links Reference -->

    </div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <div class="image_block centery w90">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_signup.jpg" alt="Figure 4.3 - Make web apps easy to try out. No velvet ropes!" title="Figure 4.3 - Make web apps easy to try out. No velvet ropes!">
           		<p class="caption mb175">Figure 4.3 - Make web apps easy to try out. No velvet ropes!</p>
            </div>

			<h3 class="help_h3">Resources To Help You</h3>
			<h4 class="help_h4">Libraries &amp; Frameworks</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://code.google.com/apis/identitytoolkit/" title="Google Identity Toolkit (GITkit)" target="_blank">Google Identity Toolkit (GITkit)</a> is a free toolkit for website operators who currently allow users to login with their email address and password, and would like to replace that password with federated login.</li>
				<li><a class="no-ajaxy" href="http://www.janrain.com/products/login-helper" title="JanRain Login Helper" target="_blank">JanRain Login Helper</a> helps websites that enable email based sign-ups to increase conversions at registration by performing inline email verification.</li>
			</ul>
			<h4 class="help_h4">Examples</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://wiki.openid.net/w/page/25453698/Gallery" title="OpenID Wiki Gallery" target="_blank">OpenID Wiki Gallery</a> - a gallery of innovative sign-in and registration experiences that leverage user managed identity.</li>
			</ul>

		</div><!-- end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="offline">

	<div class="page one">

		<div class="onecol">
			<h3>Provide an offline experience and improve performance</h3>
			<p>Developers can provide offline experiences and greatly increase the performance of their applications by caching data locally and only retrieving what’s necessary when they are connected.</p>

			<h3 class="help_h3">To help improve performance and provide an offline experience:</h3>

			<ol class="book-ol top_line">
				<li><span class="big-bullets">1.</span><strong>Use Application Cache</strong> to ensure that the browser caches any necessary application code like HTML, CSS and JavaScript.</li>
				<li><span class="big-bullets">2.</span><strong>Leverage Web Storage</strong> to store small amounts of data that you’ll need quickly or might otherwise put in cookies.</li>
				<li><span class="big-bullets">3.</span><strong>Put structured data into a web database like IndexedDB</strong> which allows you to store significant amounts of data that is efficient to query and iterate across.</li>
			</ol>
			<h3 class="help_h3">Web apps that do this well today include:</h3>
			<ul class="ext_ul" id="ext3">
		  		<a href="#" target="_blank" class="previewWindow">
       			<div class="arrow"></div>
       			<div class="screenshot"><img src=""/></div>
       			<div class="caption"></div>
       	 		 </a>
				<li><a class="preview no-ajaxy" data-url="screenshot_kindle.jpg" href="https://read.amazon.com/" title="Amazon Kindle Cloud Reader" target="_blank">Amazon Kindle Cloud Reader</a> - uses AppCache, local storage and WebSQL to provide an experience that works on iOS and desktop browsers.</li>
				<li><a class="preview no-ajaxy" data-url="screenshot_springpad.jpg" href="http://springpadit.com/springpad/" title="SpringPad" target="_blank">SpringPad</a> - uses AppCache, local storage and WebSQL to provide an experience that works both online and offline.</li>
				<li class="li_last"><a class="preview no-ajaxy" data-url="screenshot_nyt.jpg" href="http://www.nytimes.com/chrome" title="The New York Times Web App" target="_blank">The New York Times Web App</a> - uses AppCache and WebSQL to provide an offline experience that works on iOS and desktop browsers.</li>
			</ul>
		</div><!-- end col -->

		<div class="t_fix" id="ext3_div"></div><!-- External Links Reference -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">
        	<div class="image_block centery w90">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_offline_storage.jpg" alt="Figure 4.4 - Don't throw it away. Keep data close at hand to improve performace!" title="Figure 4.4 - Don't throw it away. Keep data close at hand to improve performace!">
           		<p class="caption mb175">Figure 4.4 - Don't throw it away. Keep data close at hand to improve performace!</p>
            </div>
			<h3 class="help_h3">Resources To Help You</h3>
			<h4 class="help_h4">Articles</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/features/offline" title="HTML5Rocks Offline Overview" target="_blank">HTML5Rocks Offline Overview</a></li>
				<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/" title="Offline: What does it mean and why should I care?" target="_blank">"Offline": What does it mean and why should I care?</a></li>
			</ul>
			<h4 class="help_h4">Libraries &amp; Frameworks</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://westciv.com/tools/manifestR/" title="ManifestR" target="_blank">ManifestR</a> - a bookmarklet for creating an AppCache manifest file.</li>
				<li><a class="no-ajaxy" href="http://westcoastlogic.com/lawnchair/" title="LawnChair" target="_blank">LawnChair</a> - a library that provides a lightweight, adaptive, simple and elegant persistence solution.</li>
			</ul>

		</div><!-- end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="persist">

	<div class="page one">

		<div class="onecol">

			<h3>Provide automatic data persistence</h3>
			<p>Web applications allow users to keep their data in the cloud. Users should feel confident that their work is safe. They should not have to think about where or when they saved their data, or if they have the latest version at hand. Web applications enable users to concentrate on their work without worrying about whether or not their work is safe.</p>
			<h3 class="help_h3">To provide a great experience, web applications should:</h3>
			<ol class="book-ol top_line">
				<li><span class="big-bullets">1.</span><strong>Save data locally and sync to the cloud as often as possible</strong> because people shouldn’t have to worry about their network connection or what happens to their data if they leave the application.</li>
				<li><span class="big-bullets">2.</span><strong>Start in the same place that the user was when they left the application</strong> and enable them to pick up and be productive in the same place as when they left the application.</li>
			</ol>
            <h3 class="help_h3">Resources To Help You</h3>
			<h4 class="help_h4">Tutorials</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html" title="Working Off the Grid with HTML5 Offline" target="_blank">Working Off the Grid with HTML5 Offline</a></li>
				<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="An Introduction to Application Cache" target="_blank">An Introduction to Application Cache</a></li>
				<li><a class="no-ajaxy" href="https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB" title="Using IndexedDB" target="_blank">Using IndexedDB</a></li>
			</ul>
		</div><!-- end col -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <div class="image_block centery w80">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_offline.jpg" alt="Figure 4.5 - Use AppCache and data persistence techniques to enhance usability, even offline!" title="Figure 4.5 - Use AppCache and data persistence techniques to enhance usability, even offline!">
            	<p class="caption">Figure 4.5 - Use AppCache and data persistence techniques to enhance usability, even offline!</p>
            </div>

		</div><!-- end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="informed">

	<div class="page one">

		<div class="onecol">

			<h3>Keep the user informed with notifications</h3>
			<p>A client application keeps a user informed about what it’s doing through status messages, progress bars, notification dialogs, and other methods; web applications should be no different.</p>

			<h3 class="help_h3">Keep people informed about what’s going on in web applications by:</h3>
			<ol class="book-ol top_line">
				<li><span class="big-bullets">1.</span><strong>Show loading indicators</strong> so people understand that a task is in progress.</li>
				<li><span class="big-bullets">2.</span><strong>Use HTML Notifications</strong> to provide toast like notifications for important information that people might want to know about in real time.</li>
				<li><span class="big-bullets">3.</span><strong>Use the HTML5 progress element</strong> to show either determinate or indeterminate progress.</li>
				<li><span class="big-bullets">4.</span><strong>Show modal dialogs to prevent users from moving</strong> on until they either provide specific information or the application completes any processing it needs to complete.</li>
				<li><span class="big-bullets">5.</span><strong>Animate actions that might have a real world analogue</strong> to help relate the progress to something people understand.</li>
			</ol>

		</div><!-- end col -->

		<div class="t_fix" id="ext4_div"></div><!-- External Links Reference -->

    </div><!-- end page -->

	<div class="page two">

		<div class="onecol">
			<h3 class="help_h3">Web apps that do this well today include:</h3>
			<ul class="ext_ul" id="ext4">
				<a href="#" target="_blank" class="previewWindow">
       			<div class="arrow"></div>
       			<div class="screenshot"><img src=""/></div>
       			<div class="caption"></div>
       	 		</a>
				<li><a class="preview no-ajaxy" data-url="screenshot_gmail.jpg" href="http://google.com/mail" title="Gmail" target="_blank">Gmail</a> - provides new mail notifications</li>
				<li><a class="preview no-ajaxy" data-url="screenshot_astrid.jpg" href="https://chrome.google.com/webstore/detail/pmjlnfgnkpknjgkpohcgoeiakkbofpjo" title="Astrid" target="_blank">Astrid</a> - provides reminders of your upcoming tasks</li>
				<li class="li_last"><a class="preview no-ajaxy" data-url="screenshot_tweetdeck.jpg" href="https://chrome.google.com/webstore/detail/hbdpomandigafcibbmofojjchbcdagbl" title="TweetDeck" target="_blank">TweetDeck</a> - tells you when there are new tweets that you’re following</li>
			</ul>
			<h3 class="help_h3">Resources To Help You</h3>
			<h4 class="help_h4">Articles</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://www.chromium.org/developers/design-documents/desktop-notifications" title="The Chromium Project - Desktop Notifications" target="_blank">The Chromium Project - Desktop Notifications</a></li>
				<li><a class="no-ajaxy" href="http://www.smashingmagazine.com/2009/05/27/modal-windows-in-modern-web-design/" title="Modal Windows in Modern Web Design" target="_blank">Modal Windows in Modern Web Design</a></li>
				<li><a class="no-ajaxy" href="http://webdesign.tutsplus.com/articles/modal-and-modeless-boxes-in-web-design/" title="Modal and Modeless Boxes in Web Design" target="_blank">Modal and Modeless Boxes in Web Design</a></li>
			</ul>
			<h4 class="help_h4">Tutorials</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/notifications/quick/" title="Using the Notifications API" target="_blank">Using the Notifications API</a></li>
			</ul>
			<h4 class="help_h4">Libraries &amp; Frameworks</h4>
			<ul class="help_ul">
				<li><a class="no-ajaxy" href="http://twitter.github.com/bootstrap/javascript.html#modal" title="BootStrap Modal" target="_blank">BootStrap Modal</a> - a super slim take on the traditional modal js plugin.</li>
				<li><a class="no-ajaxy" href="http://jqueryui.com/" title="jQuery UI" target="_blank">jQuery UI</a> - jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects</li>
			</ul>

		</div><!-- end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="file-handling">

	<div class="page one hasHeader">

		<div class="onecol">

			<h3>Allow drag and drop to upload or download files</h3>
			<p>If your application deals with files, you should make the experience for people trivial and easy to deal with; they should never be left wondering if they just downloaded a file, or where it went, nor should they struggle to share files with your application.</p>

			<h3 class="help_h3">When handling files:</h3>
			<ol class="book-ol top_line">
				<li><span class="big-bullets">1.</span><strong>Allow users to upload multiple files or entire directories</strong> by using the multiple or directory attribute in the file input type.</li>
				<li><span class="big-bullets">2.</span><strong>Use drag and drop to let users drag files</strong> from their computer to your application or vice versa.</li>
				<li><span class="big-bullets">3.</span><strong>Store and manipulate files locally</strong> on the user’s computer by using the File System APIs.</li>
			</ol>

			<h3 class="help_h3">Web apps that do this well today include:</h3>
			<ul class="ext_ul" id="ext5">
		 		<a href="#" target="_blank" class="previewWindow">
       			<div class="arrow"></div>
       			<div class="screenshot"><img src=""/></div>
       			<div class="caption"></div>
       	  		</a>
				<li><a class="preview no-ajaxy" data-url="screenshot_gmail.jpg" href="http://google.com/mail" title="Gmail" target="_blank">Gmail</a> - allows you to drag attachments directly into the email message.</li>
				<li><a class="preview no-ajaxy" data-url="screenshot_googledocs.jpg" href="http://google.com/docs" title="Google Docs" target="_blank">Google Docs</a> - allows you to upload new documents to the app by dragging them into the browser.</li>
				<li><a class="preview no-ajaxy" data-url="screenshot_boxnet.jpg" href="http://box.net/" title="Box.net" target="_blank">Box.net</a> - makes it easy to upload new files by dragging them into an upload widget.</li>
				<li class="li_last"><a class="preview no-ajaxy" data-url="screenshot_appmator.jpg" href="http://appmator.appspot.com/" title="AppMator" target="_blank">AppMator</a> - makes it easy to download the Chrome Web Store app package file you just created by dragging it out of the browser</li>
			</ul>

		</div><!-- end col -->

		<div class="t_fix" id="ext5_div"></div><!-- External Links Reference -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <div class="image_block centery w90">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_upload.jpg" alt="Figure 4.6 - Offer multiple file uploads. Only 427 more vacation photos to go!" title="Figure 4.6 - Offer multiple file uploads. Only 427 more vacation photos to go!">
           		<p class="caption mb175">Figure 4.6 - Offer multiple file uploads. Only 427 more vacation photos to go!</p>
            </div>

            <h3 class="help_h3">Resources To Help You</h3>
            <h4 class="help_h4">Tutorials</h4>
            <ul class="help_ul">
            	<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/dnd/basics/" title="Native HTML5 Drag &amp; Drop Tutorial" target="_blank">Native HTML5 Drag &amp; Drop Tutorial</a></li>
            	<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/file/dndfiles/" title="Reading local files in JavaScript" target="_blank">Reading local files in JavaScript</a></li>
            	<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/file/filesystem/" title="Exploring the file system APIs" target="_blank">Exploring the file system APIs</a></li>
            </ul>

		</div><!-- end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="performance">

	<div class="page one">

		<div class="onecol">

            <h3>Treat performance like a feature</h3>
            <p>Nothing is more valuable than people’s time. People expect client applications to start fast, and be immediately responsive to their use. Web applications should be no different. Web applications should start fast and always be responsive to their users.</p>
            <h3 class="help_h3">When designing around fast, web applications should:</h3>
            <ol class="book-ol top_line">
				<li><span class="big-bullets">1.</span><strong>Load your application first, then load the user's data.</strong> By caching your application code locally with AppCache, you reduce the number of network requests needed to start your application. Because the application is cached locally on the device, your application can start immediately. Use loading indicators as you retrieve any data needed to enable your application.</li>
	            <li><span class="big-bullets">2.</span><strong>Follow best practices for building fast web sites and applications.</strong> Your web application is still based on the web and you should continue to leverage those best practices.</li>
            </ol>

		</div><!-- end col -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <h3 class="help_h3">Resources To Help You</h3>
            <h4 class="help_h4">Articles</h4>
            <ul class="help_ul">
            	<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/" title="How Browsers Work: Behind The Scenes Of Modern Browsers" target="_blank">How Browsers Work: Behind The Scenes Of Modern Browsers</a></li>
            	<li><a class="no-ajaxy" href="http://stevesouders.com/hpws/rules.php" title="Steve Souders 14 Rules for Faster-Loading Web Sites" target="_blank">Steve Souders 14 Rules for Faster-Loading Web Sites</a></li>
            	<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/speed/quick/" title="Best Practices for a Faster Web App with HTML5" target="_blank">Best Practices for a Faster Web App with HTML5</a></li>
            </ul>
            <h4 class="help_h4">Tutorials</h4>
            <ul class="help_ul">
            	<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/speed/html5/" title="Improving the Performance of your HTML5 App" target="_blank">Improving the Performance of your HTML5 App</a></li>
            	<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/webperformance/basics/" title="Measuring Page Load Speed with Navigation Timing" target="_blank">Measuring Page Load Speed with Navigation Timing</a></li>
            	<li><a class="no-ajaxy" href="http://www.html5rocks.com/en/tutorials/canvas/performance/" title="Improving HTML5 Canvas Performance" target="_blank">Improving HTML5 Canvas Performance</a></li>
            </ul>
            <h4 class="help_h4">Books</h4>
            <ul class="help_ul">
            	<li><a class="no-ajaxy" href="http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309" title="High Performance Web Sites by Steve Souders" target="_blank">High Performance Web Sites by Steve Souders</a></li>
            	<li><a class="no-ajaxy" href="http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304" title="Even Faster Web Sites: Performance Best Practices for Web Developers" target="_blank">Even Faster Web Sites: Performance Best Practices for Web Developers</a></li>
            </ul>

		</div><!-- end col -->

	</div><!-- end page two -->

</section>
